<template>
    <div class="wrapper">
        <div class="listItem" v-for="(item,index) in itemJson" :key="index">
            <!-- 左图右文 -->
            <div class="inner type2" v-show="item.viewType=='0'">
                <router-link :to="url(item)" class='oneSmall'>
                    <div class="news_img">
                        <img v-lazy.container="item.coverUrl" :key="item.coverUrl">
                    </div>
                    <div class="news_detail">
                        <div class="news_title">
                            {{item.title}}
                        </div>
                        <div class="news_source"><span>{{item.source}}</span><span>{{item.time}}</span></div>
                    </div>
                </router-link>
            </div>
            <!-- 上文下一图 -->
            <div class="inner type3" v-show="item.viewType=='1'">
                <router-link :to="url(item)" class='oneLarge'>
                    <div class="news_detail">
                        <div class="news_title">
                            {{item.title}}
                        </div>
                        <div class="news_source"><span>{{item.source}}</span><span>{{item.time}}</span></div>
                    </div>
                    <div class="news_img">
                        <img v-lazy.container="item.contentImage || item.coverUrl" :key="item.contentImage || item.coverUrl">
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import img from '@/assets/lost.png'
import img2 from '@/assets/lost1.png'
export default {
    data() {
        return {
            errorLoadImg:'this.src="' + img + '"',
            errorLoadImg2:'this.src="' + img2 + '"'
        };
    },
    props: ['itemJson'],
    methods: {
        url(item) {
            return `/detail?newId=${item.newId}`
        }
    }
}
</script>

<style lang='stylus'>
.wrapper{
    .listItem{
        padding: 15px 0px;
        margin: 0 10px;
        border-bottom: 1px solid #F2F3F9;
    }
    .inner {
        width:100%;
        display: inline-block;
        position: relative;
        a{
            color:#333;
            text-decoration: none;
            &:visited{
                .news_title {
                    color: #bfbfbf;
                }
            }
            .news_img{
                border-radius:5px;
                img {
                    width:110px;
                    height:70px;
                    background: url(../../../assets/load.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
                img[lazy=loading] {
                    width:110px;
                    height:70px;
                }
                img[lazy=error] {
                    background: url(../../../assets/lost.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
            }
            .news_detail{
                .news_title{
                    font-weight: bold;
                    font-size: 16px;
                    max-height: 44px;
                    line-height: 22px;
                    overflow: hidden;
                    text-align: justify;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                }
                .news_source{
                    color:#BFBFBF;
                    margin-top:5px;
                    height:15px;
                    span{
                        height:15px;
                        font-size:12px;
                        overflow:hidden;
                        display:inline-block;
                        &:first-child{
                            max-width:70%;
                            margin-right:5%;
                        }
                    }
                }
            }
        }
        &.type2{
            height:72px;
            .news_img{
                width:110px;
                min-height: 70px;
                max-height: 70px;
                overflow:hidden;
                background: rgba(0,0,0,.6);
            }
            .news_detail{
                position: absolute;
                left:125px;
                top: 50%;
                transform :translateY(-50%);
            }
        }
        &.type3{
            .news_img{
                width:auto;
                max-height:160px;
                overflow: hidden;
                margin-top:15px;
                img {
                    width:100%;
                    height:100%;
                    background: url(../../../assets/load.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
                img[lazy=loading] {
                    width:100%;
                    height:100%;
                }
                img[lazy=error] {
                    height:200px;
                    background: url(../../../assets/lost1.png) no-repeat 0 0;
                    background-size:100% 100%;
                }
            }
        }
        &.type4{
            .news_img{
                width:100%;
                height: auto;
                margin-top:15px;
                display: flex;
                justify-content: space-between;
                div{
                    flex:1;
                    img{
                        width:95%;
                    }
                }
            }
        }
    }
}
</style>
